<template>
  <div v-loading.lock="loading" class="base-content">
    <!-- 用户列表 -->
    <div class="basic-info">
      <el-form ref="queryForm" :model="queryForm" inline>
        <el-form-item :label="dataList.Account" prop="account">
          <el-input
            v-model="queryForm.account"
            :placeholder="dataList.EnterAccount"
            clearable
            @keyup.enter.native="getList('filter')"
          />
        </el-form-item>

        <el-form-item :label="dataList.Name" prop="name">
          <el-input
            v-model="queryForm.name"
            :placeholder="dataList.EnterName"
            clearable
            @keyup.enter.native="getList('filter')"
          />
        </el-form-item>
        <el-form-item :label="dataList.TestAccount" prop="testAccount">
          <el-select v-model="queryForm.testAccount" filterable>
            <el-option :label="dataList.All" :value="-1" />
            <el-option :label="dataList.Yes" :value="1" />
            <el-option :label="dataList.No" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item class="base-filter-button">
          <el-button
            v-loading="searchLoading"
            type="primary"
            @click="getList('filter')"
            >{{ btn.Query }}</el-button
          >
          <el-button @click="cancelForm">{{ btn.Clear }}</el-button>
        </el-form-item>
      </el-form>
      <!--操作栏-->
      <div class="base-content-operate">
        <el-button
          v-rights="'add'"
          icon="el-icon-plus"
          type="primary"
          @click="onNew"
          >{{ btn.Add }}</el-button
        >
      </div>
      <!--列表-->
      <el-table
        :data="list"
        tooltip-effect="dark"
        height="calc(100% - 150px)"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column align="center" :label="dataList.number" width="80">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column
          prop="account"
          :label="dataList.Account"
          min-width="80"
        />
        <el-table-column prop="name" :label="dataList.Name" min-width="120" />
        <el-table-column
          prop="mobile"
          :label="dataList.mobile"
          min-width="120"
        />
        <el-table-column prop="mail" :label="dataList.mail" min-width="120" />
        <el-table-column
          prop="testAccount"
          :label="dataList.TestAccount"
          min-width="120"
        >
          <template slot-scope="{ row }">
            <span v-if="row.testAccount === 1">{{ dataList.Yes }}</span>
            <span v-else>{{ dataList.No }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userStatus" :label="dataList.status">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.userStatus"
              :active-value="1"
              :inactive-value="0"
              :disabled="!isEdit"
              @change="(val) => disabledUser(val, row)"
              >{{ userState[row.userStatus] }}</el-switch
            >
          </template>
        </el-table-column>
        <el-table-column
          :label="btn.operate"
          :width="$i18n.locale === 'en' ? 350 : 250"
        >
          <template slot-scope="{ row }">
            <div class="base-table-operation">
              <el-link type="primary" @click="lockUser(row)">{{
                btn.Look
              }}</el-link>
              <el-link
                v-rights="'resetpwd'"
                size="mini"
                type="primary"
                @click="handleEdit(row, 1)"
                >{{ btn.ResetPassword }}</el-link
              >
              <el-link
                size="mini"
                type="primary"
                @click="handleRelationRole(row)"
                >{{ btn.AssociatedRole }}</el-link
              >
              <el-link size="mini" type="primary" @click="handleEdit(row, 0)">{{
                btn.Edit
              }}</el-link>
              <el-link size="mini" type="danger" @click="handleDelete(row)">{{
                btn.Delete
              }}</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <BasePagination
        :total="total"
        :current-page="pageInfo.pageIndex"
        :page-count="pageCount"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>
    <PermissionUserEdit
      ref="PermissionUserEdit"
      v-model="dialogFormVisible"
      :read-only="readOnlyUserInfo"
      :edit-id="editUserId"
      :resetpwd="resetpwd"
    />
    <PermissionRoleSelectShow
      ref="PermissionRoleSelectShow"
      :edit-id="editUserId"
      :dialog-visible.sync="dialogRoleSelectVisible"
    />
  </div>
</template>

<script>
import {
  deleteRecord,
  getList,
  disableByIdAsync,
  enableByIdAsync,
} from "../../../api/Permission/PermissionUser.js";
import { userState } from "../../../utils/dictionary";
import PermissionUserEdit from "./PermissionUserEdit.vue";
import PermissionRoleSelectShow from "../../../components/Permission/PermissionRoleSelectShow.vue";
import { mapGetters } from "vuex";
export default {
  name: "PermissionUserList",
  components: { PermissionUserEdit, PermissionRoleSelectShow },
  data() {
    return {
      resetpwd: 0,
      loading: false,
      list: null,
      userState,
      queryForm: {
        account: "",
        name: "",
        mobile: "",
        mail: "",
        testAccount: -1,
      },
      editUserId: "",
      dialogFormVisible: false,
      pageInfo: {
        pageIndex: 1,
        pageSize: 10,
      },
      total: 0,
      pageCount: 0,
      searchLoading: false,
      dialogRoleSelectVisible: false,
      readOnlyUserInfo: false,
    };
  },
  computed: {
    btn() {
      return this.$t("Permission.buttons");
    },
    dataList() {
      return this.$t("Permission.PermissionUser");
    },
    ...mapGetters(["operateMap"]),
    isEdit() {
      return this.operateMap.get(`${this.$route.path}/Disable`);
    },
  },
  created() {
    this.getList();
  },
  methods: {
    currentChange(val) {
      this.pageInfo.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pageInfo.pageIndex = 1;
      this.pageInfo.pageSize = val;
      this.getList();
    },
    getList(flag) {
      this.loading = true;
      if (flag) {
        this.pageInfo.pageIndex = 1;
      }

      getList(this.queryForm, this.pageInfo)
        .then((res) => {
          this.list = res.data.dataList;
          this.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    onNew() {
      this.clearUserInfoState();
      this.dialogFormVisible = true;
    },
    handleDelete(rowData) {
      this.Helper.deleteConfirm(() => {
        this.loading = true;
        deleteRecord({ id: rowData.id })
          .then((res) => {
            this.getList();
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },
    handleEdit(rowData, updatePwd) {
      this.clearUserInfoState();
      this.editUserId = rowData.id;
      this.dialogFormVisible = true;
      this.resetpwd = updatePwd;
    },
    // 禁用用户
    async disabledUser(val, row) {
      if (!val) {
        await disableByIdAsync({ id: row.id });
      } else {
        await enableByIdAsync({ id: row.id });
      }

      this.getList();
    },
    // 查看用户信息
    lockUser(rowData) {
      this.clearUserInfoState();
      this.readOnlyUserInfo = true;
      this.editUserId = rowData.id;
      this.dialogFormVisible = true;
    },

    // 切换页码
    changePage(page) {
      this.pageInfo.pageIndex = page;
      this.getList();
    },

    // 清空筛选条件
    cancelForm() {
      this.$refs.queryForm.resetFields();
      this.getList("filter");
    },

    // 清空用户弹框状态值
    clearUserInfoState() {
      this.readOnlyUserInfo = false;
      this.editUserId = "";
    },
    // 表格样式
    rowStyle({ row }) {
      let style = {};
      if (this.selectedIds.includes(row.id)) {
        style = { background: "#C1D6FF" };
      } else if (row.state === 0) {
        style = { background: "#F2F2F2" };
      }
      return style;
    },
    // 关联角色
    handleRelationRole(rowData) {
      this.$refs.PermissionRoleSelectShow.userId = rowData.id;
      this.$refs.PermissionRoleSelectShow.getNoExistsAllDataList();
      this.$refs.PermissionRoleSelectShow.getExistsAllDataList();
      this.dialogRoleSelectVisible = true;
    },
    // 选择列表
    handleSelectionChange(row) {
      this.selectedIds = row.length ? row.map((v) => v.id) : [];
    },
  },
};
</script>
<style lang="scss" scoped>
.base-table-operation {
  .el-link {
    flex-shrink: 0;
  }
}
</style>
